@font-face {
    font-family: JetBrainsMono;
    src: url('@/assets/fonts/JetBrainsMono-Regular.woff2');
}

pre {
    font-family: JetBrainsMono, Console, '微软雅黑', Courier, monospace !important;

    code,
    span {
        font-family: JetBrainsMono, Console, '微软雅黑', Courier, monospace !important;
    }
}


.arco-typography {
    pre {
        border: 1px solid var(--color-neutral-6);
        backdrop-filter: blur(8px);
        padding: 7px;
        border-radius: 7px;
        overflow: auto;

        code {
            color: var(--color-text-1) !important;
            overflow-x: hidden;
        }
    }

    code {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 1em !important;
        border: none !important;
        background-color: transparent !important;
        color: #c7254e !important;
        border-radius: 2px;
        font-family: JetBrainsMono, Console, '微软雅黑', Courier, monospace !important;

        ol {
            margin: 0;
            padding: 0 20px;
        }
    }
}

.icon {
    fill: var(--color-text-1);
}

.arco-menu-light {
    .arco-menu-item {
        .icon {
            fill: var(--color-text-3);
        }

        &.arco-menu-selected {
            .icon {
                fill: rgb(var(--primary-6));
            }
        }
    }
}

pre code.hljs {
    overflow-x: initial !important;
}

.arco-card {
    --color-bg-2: rgba(255, 255, 255, 0.4);
}

.arco-layout-sider {
    background-color: rgba(255, 255, 255, 0.0) !important;
}

.cherry-detail-body {
    color: var(--color-text-2);
}

.kb-wang-editor {
    --w-e-toolbar-color: var(--color-text-1);
    --w-e-toolbar-active-bg-color: var(--color-neutral-3);
    --w-e-toolbar-active-color: var(--color-text-1);
    --w-e-toolbar-bg-color: var(--color-neutral-2);
    --w-e-toolbar-border-color: var(--color-neutral-4);
    --w-e-textarea-bg-color: rgba(35, 35, 36, 0.1);
    --w-e-textarea-color: var(--color-text-1);
    --w-e-textarea-slight-bg-color: var(--color-neutral-3);
    --w-e-textarea-slight-color: var(--color-text-1);
    --w-e-modal-button-bg-color: var(--color-neutral-2);
    --w-e-modal-button-border-color: var(--color-neutral-3);

    a {
        color: rgb(var(--arcoblue-6));
    }
}

body[arco-theme=dark] {
    .w-e-text-container [data-slate-editor] pre > code {
        text-shadow: 0 1px var(--color-neutral-2);
    }

    .customer-image {

        --color-bg-2: rgba(35, 35, 36, 0.3);
        --color-fill-2: rgba(35, 35, 35, 0.2);

        .arco-card {
            --color-bg-2: rgba(35, 35, 36, 0.4);
        }

        .arco-layout-sider {
            background-color: rgba(0, 0, 0, 0.0) !important;
        }


        .cherry {
            background-color: rgba(0, 0, 0, 0.3);
            .cherry-previewer {
                background-color: rgba(200, 200, 200, 0.1);
            }
        }
    }
}


.customer-image {
    --color-bg-2: rgba(255, 255, 255, 0.3);
    --color-fill-2: rgba(255, 255, 255, 0.2);


    .kb-wang-editor {

        .w-e-toolbar {
            background-color: rgba(0, 0, 0, 0) !important;
            color: var(--color-text-1);
        }

        blockquote {
            background-color: rgba(35, 35, 35, 0.4) !important;
            color: var(--color-text-1);
            backdrop-filter: blur(8px);
        }

        pre {
            background-color: rgba(35, 35, 35, 0.2) !important;
            backdrop-filter: blur(8px);

            code {
                background-color: rgba(35, 35, 35, 0.2) !important;
            }
        }

        .w-e-bar {
            background-color: var(--color-bg-1);
            color: var(--color-text-1);
        }

        .w-e-bar-item .disabled:hover {
            background-color: var(--color-neutral-3);
            color: var(--color-text-1);
        }

        .w-e-bar-item button:hover {
            background-color: var(--color-neutral-3);
            color: var(--color-text-1);
        }

        .w-e-menu-tooltip-v5:before {
            background-color: var(--color-neutral-2) !important;
            color: var(--color-text-1);
        }

        .button-container {
            button {
                background-color: var(--color-neutral-3) !important;
            }
        }
    }

    .cherry {
        background-color: rgba(255, 255, 255, 0.3);
        .cherry-previewer {
            background-color: rgba(100, 100, 100, 0.1);
        }
    }

}
